<template>
  <div id="usersManage">
    <div style="margin:5px 0 10px 0">
      <Button type="primary" size="large" @click="exportData()">
        <Icon type="ios-download-outline"></Icon>Export data
      </Button>
      <div class="search_input">
        <Input
          search
          enter-button
          placeholder="请输入用户名"
          v-model="searchName"
          @on-change="searchUser"
        />
      </div>
    </div>
    <Table :data="usershowData" :columns="tableColumns1" stripe ref="tables">
      <template slot-scope="{ row, index }" slot="id">
        <Input type="text" disabled="disabled" v-model="editId" v-if="editIndex === index"/>
        <span v-else>{{ row.id }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="username">
        <Input type="text" v-model="editUsername" v-if="editIndex === index"/>
        <span v-else>{{ row.username }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="age">
        <Input type="text" v-model="editAge" v-if="editIndex === index"/>
        <span v-else>{{ row.age }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="password">
        <Input type="text" v-model="editPassword" v-if="editIndex === index"/>
        <span v-else>{{ row.password }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <div v-if="editIndex === index&&!noAdd">
          <Button @click="handleSave(index)">保存</Button>
          <Button @click="editIndex = -1">取消</Button>
        </div>
        <div v-else-if="editIndex === index&&noAdd">
          <Button @click="handleSave(index)">保存</Button>
          <Button @click="cancelAdd(index)">取消</Button>
        </div>
        <div v-else>
          <Button @click="handleEdit(row, index)">操作</Button>
          <Button type="success" @click="handleadd(index)">添加</Button>
          <Button type="error" @click="handleremove(index)">删除</Button>
        </div>
      </template>
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page
          :total="userTotalList"
          :page-size="pageSize"
          v-if="userTotalList"
          :current="currentPage"
          @on-change="changePage"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  inject:['reload'],
  name: "UsersManage",
  data() {
    return {
      usersData: this.tableDataUsers(),
      usershowData: [],
      userPreShowData: [],
      userTotalList: 0,
      currentPage: 1,
      pageSize: 10,
      searchName: "",
      noAdd:false,
      tableColumns1: [
        {
          title: "Id",
          key: "id",
          slot: "id"
        },
        {
          title: "Username",
          key: "username",
          slot: "username"
        },
        {
          title: "Age",
          key: "age",
          slot: "age",
          sortable: true
        },
        {
          title: "Password",
          key: "password",
          slot: "password"
        },
        {
          title: "操作",
          key: "action",
          slot: "action"
        }
      ],
      editIndex: -1, // 当前聚焦的输入框的行数
      editId: "", // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
      editUsername: "", // 第二列输入框
      editAge: "", // 第三列输入框
      editPassword: "" // 第四列输入框
    };
  },
  methods: {
    cancelAdd(index){
      this.usersData.splice(index , 1);
      this.editIndex = -1
      this.noAdd=false;
    },
    tableDataUsers() {
      axios.get("api/Alluser").then(res => {
        res = res.data;
        if (res.data) {
          this.usersData = res.data;
        }
        this.userTotalList = this.usersData.length;
        if (this.userTotalList < this.pageSize) {
          this.usershowData = this.usersData;
          this.userPreShowData = this.usershowData;
        } else {
          this.usershowData = this.usersData.slice(0, this.pageSize);
          this.userPreShowData = this.usershowData;
        }
      });
    },
    exportData() {
      console.log(this.usersData);
      if (this.usersData) {
        this.$refs.tables.exportCsv({
          filename: "The userdata"
          // original :false
        });
      }
    },
    changePage() {
      let start = (index - 1) * this.pageSize;
      let end = index * this.pageSize;
      this.usershowData = this.usersData.slice(start, end);
      console.log(this.usershowData);
    },
    searchUser() {
      if (this.searchName) {
        let usersjsons={
          "username":this.searchName
        }
        axios.post(`api/SearchUsers`,usersjsons).then(res => {
          res = res.data;
          if (res.data) {
            this.usershowData = res.data;
          }
        });
      } else {
        this.usershowData = this.userPreShowData;
      }
    },
    handleEdit(row, index) {
      console.log("我是handleEditan");
      this.editId = row.id;
      this.editUsername = row.username;
      this.editAge = row.age;
      this.editPassword = row.password;
      this.editIndex = index;
    },
    handleSave(index) {
      this.usersData[index].id = this.editId;
      this.usersData[index].username = this.editUsername;
      this.usersData[index].age = this.editAge;
      this.usersData[index].password = this.editPassword;
      let usersjson = {
        id: this.editId,
        username: this.editUsername,
        age: this.editAge,
        password: this.editPassword
      };
      axios.post("api/UpdateUsers", usersjson).then(res => {
        // console.log(res.data);
        this.usersData = res.data.data;
      });
            this.editIndex = -1;
            this.reload();
    },
    handleremove(index) {
      // console.log(this.usersData[index].id)
      axios.get("api/DeleteUsers/" + this.usersData[index].id).then(() => {
        console.log("删除成功");
      });
      this.usersData.splice(index, 1);
      this.editIndex = -1;
      this.reload();
    },
    handleadd(index) {
          this.editUsername = '';
      this.editAge = '';
      this.editPassword ='' ;
      this.editIndex = index + 1;
      this.usersData.splice(index + 1, 0, {}); //0是删除的个数
      this.noAdd=true;
      // console.log(index+1)
      // this.handleEdit(row,index+1);
    }
  }
};
</script>

<style>
</style>
